<!--
 * @Author: 胡晓星
 * @Date: 2024-08-08 11:51:57
 * @LastEditors: 491256909@qq.com
 * @LastEditTime: 2025-08-17 09:33:36
 * @FilePath: \src\pages\schedule\gameDetail.vue
 * @Description: 
-->
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { B1 } from './B1'
import { B2 } from './B2'
import { B3 } from './B3'
import { B4 } from './B4'
import { B5 } from './B5'
import { B6 } from './B6'
import { A1 } from './A1'
import { A2 } from './A2'
import { A3 } from './A3'
import { A4 } from './A4'
import { A5 } from './A5'
import { A6 } from './A6'
import { C1 } from './C1'
import { C2 } from './C2'
import { D1 } from './D1'
import { D2 } from './D2'
import { D3 } from './D3'
const route = useRoute();
const myId = route.query.id;
definePage({
  name: 'gameDetail',
  meta: {
    level: 2,
    title: '🏆 比赛详情',
    i18n: 'home.gameDetail',
  },
})
let gameData = {
  teamA: {
    name: '',
    score:0,
    playerList:<any>[]
  },
  teamB: {
    name:'',
    score:0,
    playerList:<any>[]
  }
}
const datas = {
  "A1": A1 ,
  "A2": A2 ,
  "A3": A3 ,
  "A4": A4 ,
  "A5": A5 ,
  "A6": A6 ,
  "B1": B1,
  "B2": B2,
  "B3": B3,
  "B4": B4,
  "B5": B5,
  "B6": B6,
  "C1": C1,
  "C2": C2,
  "D1": D1,
  "D2": D2,
  "D3": D3,
}
Object.keys(datas).forEach(key=>{
  console.log(key, datas[key])
  if(key == myId){
    gameData = datas[key]
  }
})
console.log(gameData,myId);
const activeName = ref(0);
</script>

<template>
  <Container>
    <div class="data-content">
      <div class="card-cont">
          <van-row class="card-body">
            <van-col span="9">{{gameData.teamA.name}}</van-col>
            <van-col span="6" class="score"><span :class="{'score_win':gameData.teamA.score>gameData.teamB.score,'score_fail':gameData.teamA.score<gameData.teamB.score}">{{gameData.teamA.score}}</span> : <span :class="{'score_win':gameData.teamA.score<gameData.teamB.score,'score_fail':gameData.teamA.score>gameData.teamB.score}">{{gameData.teamB.score}}</span></van-col>
            <van-col span="9">{{gameData.teamB.name}}</van-col>
          </van-row>
        </div>
      <van-tabs v-model:active="activeName">
        <van-tab :title="gameData?.teamA.name">
          <div class="team-info">
            <van-row class="info-header">
                <van-col span="8">阵容</van-col>
                <van-col span="5">是否首发</van-col>
                <van-col span="6">得分</van-col>
                <van-col span="5">犯规</van-col>
              </van-row>
              <van-row class="info-body" v-for="item in gameData?.teamA?.playerList" :key="item.number">
                <van-col span="8">{{item.name}}{{item.level == 'S' ? '  ★' : ''}}</van-col>
                <van-col span="5">{{item.isFirst == 1 ? '是' : '否'}}</van-col>
                <van-col span="6">{{item.score}}</van-col>
                <van-col span="5">{{item.foul}}</van-col>
              </van-row>
          </div>
        </van-tab>
        <van-tab :title="gameData?.teamB.name">
          <div class="team-info">
            <van-row class="info-header">
                <van-col span="8">阵容</van-col>
                <van-col span="5">是否首发</van-col>
                <van-col span="6">得分</van-col>
                <van-col span="5">犯规</van-col>
              </van-row>
              <van-row class="info-body" v-for="item in gameData?.teamB?.playerList" :key="item.number">
                <van-col span="8">{{item.name}}{{item.level == 'S' ? '  ★' : ''}}</van-col>
                <van-col span="5">{{item.isFirst == 1 ? '是' : '否'}}</van-col>
                <van-col span="6">{{item.score}}</van-col>
                <van-col span="5">{{item.foul}}</van-col>
              </van-row>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </Container>
</template>

<style lang="less" scoped>
.card-cont{
  width: 96%;
  background: #fff;
  border-radius: 10px;
  margin: 10px auto;
  box-shadow: 2px 2px 6px #e2eefc;
  .card-body{
    width: 100%;
    height: 80px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    .van-col:nth-child(2n-1){
      font-weight: bold;
      font-size: 16px
    };
    .score{
      font-weight: bold;
      font-size: 18px;
      .score_win{
        color: #fa0000;
      }
      .score_fail{
        color: #666;
      }
    }
    
    
  }
}
.data-content {
  .team-info{
    width: 100%;
    margin: 0 auto;
    .team-name{
      font-size: 18px;
      font-weight: 600;
      color: #333;
      text-align: center;
    }
    .info-header{
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #666;
      padding: 6px 0;
      border-bottom: 1px solid #eee;
      background: #eee;
      text-align: center;
    }
    .info-body{
      text-align: center;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;
      color: #333;
      border-bottom: 1px solid #eee;
      .van-col:first-child{
        border-right: 1px solid #eee;
        padding: 8px 0;
      }
    }
  }
  .van-image{
    margin: 0 auto;
  }
 
}
</style>./B1